<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="订单详情" fixed :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"
      background-color="#fff"></uni-nav-bar>
    <view class="main">
      <view class="detail detailHeight2">
        <view class="title">订单明细</view>
        <view class="info">
          <view class="one">收银员：{{ obj.cashierName }}</view>
          <view class="two">订单号：{{ obj.orderNumber }}</view>
        </view>
        <view class="info">
          <view class="one" v-if="obj.orderMethods == '0'">支付方式：扫码</view>
          <view class="one" v-if="obj.orderMethods == '1'">支付方式：现金</view>
          <view class="one" v-if="obj.orderMethods == '2'">支付方式：断网</view>
          <view class="two">下单时间：{{ obj.bookingTime | parseTime('YYYY-MM-DD HH:mm:ss') }}</view>
        </view>
        <view class="info">
          <view class="one">订单合计：{{ obj.commodityMoney }}</view>
          <view class="two">优惠金额：{{ obj.discountMoney }}</view>
        </view>
        <view class="info">
          <view class="one">实收金额：{{ obj.receiptsMoney }}</view>
          <view class="two">找零：{{ obj.changes }}</view>
        </view>
        <view class="info">
          <view class="one">订单件数：{{ obj.commodityTotal }}</view>
          <view class="two">应收：{{ obj.receivableMoney }}</view>
        </view>
        <view class="info">
          <view class="one">数字资产：{{ obj.tokenNum }}</view>
          <!-- <view class="two">小计优惠：{{ obj.discountMoney }}</view> -->
        </view>
      </view>
      <view class="detail detailHeight1" v-if="obj.memberPhone">
        <view class="title">会员信息</view>
        <view class="one u-ellipsis" style="margin-bottom: 10rpx;  font-size: 28rpx;">会员名称：{{ obj.memberName ?
          obj.memberName : obj.memberPhone }}</view>
        <view class="two" style="font-size: 28rpx;">手机号：{{ obj.memberPhone ? obj.memberPhone : '无' }}</view>
      </view>
      <view class="goodsList">
        <view class="title">商品明细</view>
        <view class="goods" v-for="(item, index) in  goodsList " :key="item.id + index">
          <image :src="imgUrlList[index] ? imgUrlList[index] : '/static/index/noneImg.png'" mode="aspectFill"></image>
          <view class="goodInfo">
            <view class="name u-ellipsis" style="font-weight: 600;">{{ item.commodityName }}</view>
            <view class="price">
              <text class="num">￥{{ item.storePrice }} * {{ item.type == '1' ? item.weight + 'KG' : item.commodityNum
              }}</text>
              <text class="money">小计：￥{{ item.receivableAmount }}</text>
            </view>
            <view class="price">
              <text class="num">利润率：{{ item.commodityRate }}%</text>
              <text class="money">利润：￥{{ item.commodityProfit }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="btn" :style="{ paddingBottom: safeAreaBottom + 'px' }"
        v-if="pages == 'pages/order/paymentOrder' && status == '0'"
        @click.stop="$navTo('./payOrderDetailReturns', { id: id, obj: JSON.stringify(obj) })">
        <text>退货</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "InventoryInfo",
  data() {
    return {
      goodsList: [],
      imgUrlList: [],
      id: '',
      obj: {},
      pages: '',
      status: ''
    }
  },
  onLoad(params) {
    // console.log('params', params);
    this.id = params?.id
    this.obj = params.obj ? JSON.parse(params.obj) : {}
    this.goodsList = this.obj?.commodityList
    this.imgUrlList = this.obj?.imgUrlList
    this.status = this.obj?.status
    console.log('goodsList', this.obj);
    let pages = getCurrentPages() // 获取栈实例
    let prevPage = pages[pages.length - 2]
    this.pages = prevPage.route
    // console.log('prevPage', prevPage);
  },
  onShow() {
  },
  methods: {
  }
}
</script>
<style>
page {
  background: #fff;

}
</style>
<style lang="scss" scoped >
.content {
  height: 100vh;
  background-color: #fff;
}

view {
  box-sizing: border-box;
}

.main {

  display: flex;
  flex-direction: column;
  height: calc(100% - 88rpx);

  .detailHeight1 {

    height: 180rpx;
  }

  .detailHeight2 {

    height: 380rpx;
  }

  .detail {
    padding: 10rpx;
    width: 100%;
    border-bottom: 1px solid #eee;

    .title {
      height: 50rpx;
      line-height: 50rpx;
      font-size: 36rpx;
      font-weight: 600;
      margin-bottom: 10rpx;
    }

    .info {
      font-size: 28rpx;
      height: 50rpx;
      line-height: 50rpx;
      display: flex;
      justify-content: space-between;
      // margin-bottom: 10rpx;

      .one {
        width: 40%;
      }

      .two {
        width: 60%;
      }
    }
  }

  .goodsList {
    flex: 1;
    padding: 10rpx;
    overflow: scroll;

    .title {
      height: 50rpx;
      line-height: 50rpx;
      font-size: 36rpx;
      font-weight: 600;
      margin-bottom: 10rpx;
    }

    .goods {
      display: flex;

      justify-content: space-between;
      padding: 20rpx 10rpx;
      height: 180rpx;
      font-size: 28rpx;
      border-bottom: 1px solid #eee;

      image {
        margin-right: 20rpx;
        height: 140rpx;
        width: 140rpx;
        box-sizing: border-box;
        border: 1px solid #eee;
      }

      .goodInfo {
        flex: 1;
        // line-height: 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-right: 30rpx;
      }

      .price {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .btn {
    height: 80rpx;
    text-align: center;
    background-color: $uni-main-bgColor;
    line-height: 80rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: 600
  }
}
</style>
